<template>
	<el-container>
		<el-header class="header-tabs">
			<el-tabs type="card" v-model="groupId">
				<el-tab-pane label="印章接收" name="0"></el-tab-pane>
				<el-tab-pane label="交接记录" name="1"></el-tab-pane>
			</el-tabs>
		</el-header>
		<el-main class="nopadding" style="overflow-x: hidden;">
			<el-container v-if="groupId === '0'">
				<el-header>
					<div class="left-panel">
						<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
						<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
					</div>
				</el-header>
				<el-main class="nopadding">
					<bydTable ref="table" :apiObj="apiObj" row-key="changeId" @selection-change="selectionChange" stripe border>
						<el-table-column type="selection" width="50"></el-table-column>
						<el-table-column label="序号" type="index" fixed width="50"></el-table-column>
						<el-table-column label="移交人" prop="getName" width="150"></el-table-column>
						<el-table-column label="地区" prop="place" width="100"></el-table-column>
						<el-table-column label="工厂/部门" prop="factory" width="150"></el-table-column>
						<el-table-column label="印章名称" prop="sealName" min-width="150"></el-table-column>
						<el-table-column label="印章规格"  prop="specifications" width="150"></el-table-column>
						<el-table-column label="原监印人"  prop="oldKeepName" width="150"></el-table-column>
						<el-table-column label="移交数量" prop="sealCount" width="100"></el-table-column>
						<el-table-column label="移交日期" prop="getDate" :formatter="formatDate" width="150"></el-table-column>
						<el-table-column label="移交原因" prop="getReason" width="150"></el-table-column>
						<el-table-column label="接收人" prop="receiveName" width="300"></el-table-column>
						<el-table-column label="印章图样" prop="sealPattern" width="150" fixed="right" align="center">
							<template #default="scope">
								<bydWaterMark ref="wm" text="印章管理系统" subtext="印章图样">
								<el-image @click="handleLoad"
										style="width: 120px; height: 80px" 
										:preview-teleported="true" 
										:src="scope.row.sealPattern" 
										:fit="fit" 
										:preview-src-list="[scope.row.sealPattern]">
									</el-image>
								</bydWaterMark>
							</template>
						</el-table-column>
						<el-table-column label="操作" fixed="right" align="center" width="120">
							<template #default="scope">
								<el-button type="text" size="small" @click="receiveSeal(scope.$index,scope.row.changeId)">接收</el-button>
								<el-divider direction="vertical"></el-divider>
								<el-popconfirm title="确定删除吗？" @confirm="refuseSeal(scope.$index,scope.row.changeId)">
									<template #reference>
										<el-button type="text" size="small">退回</el-button>
									</template>
								</el-popconfirm>
							</template>
						</el-table-column>
					</bydTable>
				</el-main>
			</el-container>
			<change-record v-else></change-record>
		</el-main>
	</el-container>
</template>

<script>
	import changeRecord from './changeRecord.vue'
	import { create } from '@/utils/watermark';
	import mmt from 'moment';

	export default {
		name: "confirmInfoPage",
		components:{changeRecord},
		data(){
			return {
				groupId: '0',
				apiObj: this.$api.infoConfirm.sealChangeConfirm,
				selection: [],
				trackIdNow: '',
				pageType : 1,
			}
		},
		methods: {
			handleLoad() {
                setTimeout(() => {
                    const img = document.querySelector('.el-image-viewer__canvas');
                    var userInfo = this.$tool.data.get("USER_INFO");
                    create(img, { text: '印章管理系统',subtext : userInfo.username + userInfo.jobnumber })
                }, 100)
            },
			formatDate(value){
				return mmt(value.getDate).format('YYYY-MM-DD');
			},
			//接收印章
			async receiveSeal(index,changeId){
				var receiveResult =  await this.$api.infoConfirm.receiveDivisionSeal.post({
					changeId : changeId
				});
				if(receiveResult.respCode == "0000"){
					this.$refs.table.tableData.splice(index, 1);
					this.$message({
									message: receiveResult.respDesc,
    								type: 'success',
								})
					setTimeout(() => {
						location.reload();
					},2000)
				}else{
					this.$message.error(receiveResult.respDesc);
				}
			},
			//退回收到的印章
			async refuseSeal(index,changeId){
				var refuseResult = await this.$api.infoConfirm.refuseDivisionSeal.post({
					changeId : changeId
				})
				if(refuseResult.respCode == "0000"){
					this.$refs.table.tableData.splice(index, 1);
					this.$message({
									message: receiveResult.respDesc,
    								type: 'success',
								})
					setTimeout(() => {
						location.reload();
					},2000)
				}else{
					this.$message.error(receiveResult.respDesc);
				}
			},
		}
	}
</script>

<style>
</style>
